<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="elementui/index.css">
    <script src="elementui/vue.js"></script>
    <script src="elementui/index.js"></script>
</head>
<body>
<!--显示组件容器-->
<div id="app">


    <!--表格组件
    :data="tableData" :=v-bind
    -->
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="date"
                label="日期"
        >
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
        >
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
        >
        </el-table-column>
        <el-table-column
                prop="city"
                label="市区"
        >
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
        >
        </el-table-column>
        <el-table-column
                prop="zip"
                label="邮编"
        >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!--分页组件
        @size-change="handleSizeChange"  每页显示记录数
        @current-change="handleCurrentChange": 获取当前页码
        current-page="currentPage4"  默认当前第几页（一般为第1页）
        page-sizes:每页显示条数列表
        :total="400" 总记录数 后续从后台查询


        显示分页数据：后台需要返回 total(总记录数)+table组件需要显示的数据
    -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="30"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>


</div>

</body>
</html>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 1,
                //相当于后台返回List<T>
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎1',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎2',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎3',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎4',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        },
        methods: {
            handleClick(row) {
                //将对象转字符串
                alert(JSON.stringify(row));
                console.log(row);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        }
    })
</script>